<template>
	<view class="detail-head">
		<view class="head-goback">
			<view class="click-area" @click="goToPage"></view>
		</view>
		<view class="head-logotext">SKY数字版权</view>
		<uni-icons class="home" type="home-filled" size="30" color="#5f5f5f" v-if="type === 'home'" @click="goToAssignPage"></uni-icons>
		<uni-icons class="mine" type="contact-filled" size="38" color="#5f5f5f" v-if="type === 'mine'" @click="goToAssignPage"></uni-icons>
		<view class="head-setting" :class="[type === 'none' ? type :'']" v-if="type === 'setting'">
			<view :class="['click-area', type]" @click="goToAssignPage"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				default: 'home'
			},
			url: {
				default: '/pages/home/home'
			},
			rightUrl: {
				default: '/pages/home/home'
			}
		},
		data() {
			return {}
		},
		methods: {
			goToAssignPage() {
				if (this.type === 'mine') {
					this.$tool.navigateTo("/pages/mine/mine")
				} else if (this.type === 'setting') {
					this.$tool.navigateTo("/pages/setting/setting")
				} else if (this.type === 'home') {
					this.$tool.navigateTo("/pages/home/home")
				} else if (this.type === 'none') {
					return false
				}

			},
			goToPage() {
				this.$tool.navigateTo(this.url)
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail-head {
		width: 100%;
		height: 100rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: RGBA(29, 29, 31, 0.5);

		.head-goback {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			top: 50%;
			left: -35rpx;
			transform: translateY(calc(-50% + 16rpx));
			background: $common-goback-url no-repeat;
			background-size: 100% 100%;
			background-position: 0 0;
		}

		.click-area {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			position: absolute;
			left: 56rpx;
			top: 58rpx;
			z-index: 2;
		}

		.head-logotext {
			font-size: 32rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #BFCBCD;
			line-height: 48rpx;
		}

		.head-setting {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			right: -60rpx;
			top: 50%;
			transform: translateY(calc(-50% + 16rpx));
			background: $common-setting-url no-repeat;
			background-size: 100% 100%;
			background-position: center center;
		}

		.home {
			position: absolute;
			top: 25rpx;
			right: 20rpx;
		}

		.mine {
			position: absolute;
			top: 18rpx;
			right: 15rpx;
		}

		.setting {
			background: none;
		}

		.none {
			display: none;
		}
	}
</style>
